import React, {Component} from "react";
import {
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    Dimensions,
    TextInput,
    TouchableOpacity,
    Easing,
    SectionList,
    Alert
} from "react-native";
import Drawer from "react-native-drawer-menu";
import Carousel from "react-native-banner-carousel";
import CardView from "react-native-cardview";
import {Spruce, CorneredSort, DefaultAnimations} from "react-native-spruce";
import HomeMenuView from "../../common/widget/HomeMenuView";
const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 200;
const {width} = Dimensions.get('window')
const images = [
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524228039339&di=c705d74cd84997e0de49414fa46dbb54&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F693259.jpg",
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524462579020&di=69326ee48632678a1367e7712d96f6fe&imgtype=0&src=http%3A%2F%2Fdmimg.5054399.com%2Fallimg%2F111220%2F130J55P9-84.jpg",
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524462970357&di=c66da9ed8c06c3da74b27a50a56de683&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fhb%2FMTQ2Mjg0NDg0MjM3Ny0xMjc4MDI4NzE1.jpg",
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524463380953&di=4e47bd1c7252137cc8dccba2b9c62deb&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201503%2F25%2F20150325222930_QB5uY.png"
];

const SUBJECT_NAMES = [{data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'], title: "小学"},
    {data: ['初一', '初二', '初三',], title: '初中'},
    {data: ['高一', '高二', '高三'], title: '高中'},
];

const data = [
    {id: 1, label: '一年级'},
    {id: 2, label: '二年级'},
    {id: 3, label: '三年级'},
    {id: 4, label: '四年级'},
    {id: 5, label: '五年级'},
    {id: 6, label: '六年级'},
];


export default class SelectScene extends Component {

    constructor(props) {
        super(props)
        this.navBar = null
        this.renderRow = this.renderRow.bind(this)
        this.renderHeader = this.renderHeader.bind(this)
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
            disabled: false,
            dataArray2: SUBJECT_NAMES
        }
    }

    renderRow(rowData, sectionId, rowId) {
        return (
            <CardView
                marginTop={6}
                marginRight={6}
                marginLeft={6}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}>
                <Text style={{height:80,width:BannerWidth,}}>{`这是第：${rowId}行`}</Text>
            </CardView>
        )
    }

    onMenuSelected = (index: number) => {
        alert(index)
    }

    renderHeader() {

        let menuInfo = [
            {title: '数学', icon: require('../../../res/img/home/shuxue.png')},
            {title: '语文', icon: require('../../../res/img/home/yuwen.png')},
            {title: '英语', icon: require('../../../res/img/home/yingyu.png')},
            {title: '历史', icon: require('../../../res/img/home/lishi.png')},
            {title: '地理', icon: require('../../../res/img/home/dili.png')},
            {title: '政治', icon: require('../../../res/img/home/zhengzhi.png')},
            {title: '物理', icon: require('../../../res/img/home/wuli.png')},
            {title: '化学', icon: require('../../../res/img/home/huaxue.png')},
            {title: '生物', icon: require('../../../res/img/home/shengwu.png')},

            {title: '体育', icon: require('../../../res/img/home/tiyu.png')},
            {title: '音乐', icon: require('../../../res/img/home/yinyue.png')},
            {title: 'Java', icon: require('../../../res/img/home/java.png')},
            {title: 'PHP', icon: require('../../../res/img/home/php.png')},
            {title: 'Python', icon: require('../../../res/img/home/python.png')},
        ]

        return (
            <View>



                <Carousel
                    autoplay
                    autoplayTimeout={3000}
                    loop
                    index={0}
                    pageSize={BannerWidth}
                >
                    {images.map((image, index) => this.renderPage(image, index))}
                </Carousel>

                <HomeMenuView menuInfos={menuInfo} onMenuSelected={this.onMenuSelected}/>



            </View>
        )
    }

    renderPage(image, index) {
        return (
            <View key={index}>
                <Image style={{ width: BannerWidth, height: BannerHeight }} source={{ uri: image }}/>
            </View>
        );
    }


    _onScroll(event) {
        let y = event.nativeEvent.contentOffset.y
        let opacityPercent = y / 64
        if (y < 64) {
            this.navBar.setNativeProps({
                style: {opacity: opacityPercent}
            })

        } else {
            this.navBar.setNativeProps({
                style: {opacity: 1}
            })

            this.ti.setNativeProps({
                style: {backgroundColor: 'white'}
            })

        }
    }

    openRightDrawer() {
        let isOpen = this.isLeftOpen || this.isRightOpen;
        const disabled = this.props.disabled || this.props.rightDisabled;
        if (!this.isRight || isOpen || disabled) return;
        this.isRightActive = true;
        this.openDrawer();
    }

    render() {

        let sortWith = new CorneredSort(100);
        // let animateWith = DefaultAnimations.shrinkAnimator(1000)
        // let animateWith = DefaultAnimations.growAnimator(1000)
        let animateWith = DefaultAnimations.spinAnimator(1500)


        var rightDrawerContent = (
            <View style={styles.drawerContent}>


            </View>);

        let dataSource = this.state.dataSource.cloneWithRows([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])

        return (

            <Drawer
                ref={(comp) => {this.drawer = comp;}}
                style={styles.container}
                rightDrawerContent={rightDrawerContent}
                type={Drawer.types.Overlay}
                customStyles={{
                rightDrawer: styles.rightDrawer
                }}
                drawerWidth={200}
                leftDisabled={false}
                drawerPosition={Drawer.positions.Both}
                easingFunc={Easing.ease}
            >

                <View style={styles.container}>

                    <Spruce sortWith={sortWith} animateWith={animateWith}
                            animator={{ propertyName: "translationY", values: [5000, 0], duration: 2000 }}>

                        <ListView
                            onScroll={this._onScroll.bind(this)}
                            bounces={false}
                            dataSource={dataSource}
                            renderRow={this.renderRow}
                            renderHeader={this.renderHeader}/>

                    </Spruce>
                    <View style={[styles.navBar, {backgroundColor: 'transparent'}]}>
                        <View style={styles.navContent}>
                            <TouchableOpacity onPress={()=>{
                                          alert('select_search_icon')
                                      }}>
                                <Text style={{fontSize:14,color:'white'}}>一年级</Text>
                            </TouchableOpacity>
                            <View style={styles.searchBar}>
                                <TextInput
                                    ref={ref => this.ti = ref}
                                    style={{fontSize: 13, height: 40}}
                                    placeholder={'请输入搜索内容'}
                                    placeholderTextColor="rgba(255,255,255,0.5)"
                                    underlineColorAndroid='transparent'/>
                            </View>
                            <TouchableOpacity onPress={() => {this.drawer && this.drawer.openRightDrawer();}}>
                                <Image style={{width:25,height:25}}
                                       source={require('../../../res/img/select/filter.png')}/>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View
                        ref={ref => this.navBar = ref}
                        style={[styles.navBar, {opacity: 0}]}>
                        <View style={styles.navContent}>
                            <TouchableOpacity onPress={()=>{
                                          alert('select_search_icon')
                                      }}>
                                <Text style={{fontSize:14,color:'white'}}>一年级</Text>
                            </TouchableOpacity>
                            <View style={styles.searchBar} ref={ref => this.ti = ref}>
                                <TextInput
                                    style={{fontSize: 13, height: 40}}
                                    placeholder={'请输入搜索内容'}
                                    placeholderTextColor="rgba(0,0,0,0.4)"
                                    underlineColorAndroid='transparent'/>
                            </View>
                            <TouchableOpacity onPress={() => {this.drawer && this.drawer.openRightDrawer();}}>
                                <Image style={{width:25,height:25}}
                                       source={require('../../../res/img/select/filter.png')}/>
                            </TouchableOpacity>

                        </View>
                    </View>
                </View>
            </Drawer>
        );
    }
}

const styles = StyleSheet.create({
    sectionHeader: {
        height: 50,
        backgroundColor: 'rgba(255,255,255,0.6)',
        alignItems: 'center',
        justifyContent: 'center'
    },
    container: {
        flex: 1,
        backgroundColor: 'rgba(255,255,255,0.2)',
    },
    navBar: {
        height: 64,
        width: width,
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#DB3843',
    },
    navContent: {
        marginTop: 10,
        height: 44,
        width: width,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
        marginBottom: 10
    },
    searchBar: {
        justifyContent: 'center',
        paddingHorizontal: 10,
        borderTopLeftRadius: 12,
        borderBottomLeftRadius: 12,
        borderTopRightRadius: 12,
        borderBottomRightRadius: 12,
        flex: 1,
        height: 25,
        backgroundColor: 'rgba(255,255,255,0.6)',
        marginHorizontal: 15
    },
    drawerContent: {
        flex: 1,
        backgroundColor: '#F9F9F9',
        padding: 12
    },
    item: {
        borderWidth: 0,
        borderColor: '#333',
        backgroundColor: '#FFF',
    },
    label: {
        color: '#333'
    },
    itemSelected: {
        backgroundColor: '#DB3843',
    },
    labelSelected: {
        color: '#FFF',
    },
})